<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />

    <title>FAQ 手风琴</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 17px;
      }
      .body {
        position: relative;
        font-family: "Work Sans", sans-serif;
        font-size: 17px;
        height: 100vh;
        width: 100%;
        background-color: hsl(275, 100%, 97%);
      }

      .bg {
        width: 100%;
        height: 19.3125rem;
        background-image: url(./assets/images/background-pattern-desktop.svg);
      }

      .content {
        position: absolute;
        width: 37.8125rem;
        max-width: 90%;
        /* height: 568px; */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 3%;
        padding: 2.5rem;
        padding-bottom: 0;
      }
      img {
        vertical-align: middle;
      }
      .head img {
        width: 2.5rem;
        height: 2.5rem;
      }

      .head h1 {
        display: inline-block;
        vertical-align: middle;
        height: 2.5rem;
        font-weight: 1000;
        font-size: 2.5rem;
        margin-left: 1.5625rem;
        line-height: 2.5rem;
        text-align: left;
      }

      .main {
        display: flex;
        flex-direction: column;
        margin-top: 1.875rem;
      }

      .part {
        flex: 1;
        border-bottom: solid;
        border-color: #faf9f9;
        width: 100%;
        padding: 1.875rem 0;
      }

      .ques {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 1.0625rem;
        border: none;
        background-color: transparent;
      }

      .ques .p1 {
        font-weight: 700;
        vertical-align: middle;
        text-align: left;
      }
      .ques img {
        margin-top: -0.23rem;
        padding-left: 40px;
      }

      .answer {
        padding-top: 1rem;
        font-size: 1.0625rem;
      }

      .answer p {
        color: #aaa;
      }

      .ques:hover {
        color: hsl(281, 83%, 54%);
        cursor: pointer;
      }

      /* 只在键盘导航时显示聚焦样式 */
      .ques:focus-visible {
        color: hsl(281, 83%, 54%);
        outline: none;
      }

      .ques.active:focus-visible {
        color: #000; /* 默认黑色 */
      }
      /* 响应式布局 */
      @media (max-width: 375px) {
        html {
          font-size: 8px;
        }

        .ques img {
          padding-left: 20px;
        }
        .answer {
          font-size: 8px;
        }
      }

      @media (min-width: 375px) and (max-width: 1024px) {
        html {
          font-size: 14px;
        }
      }
      /* 桌面 (1024px+) */
      @media (min-width: 1025px) {
        html {
          font-size: 17px;
        }
      }

      .show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="body">
      <div class="bg"></div>
      <div class="content">
        <div class="head">
          <img src="./assets/images/icon-star.svg" alt="" />
          <h1>FAQs</h1>
        </div>

        <div class="main">
          <div class="part">
            <button class="ques">
              <p class="p1">
                What is Frontend Mentor, and how will it help me?
              </p>
              <img src="./assets/images/icon-plus.svg" alt="" />
            </button>

            <div class="answer" hidden>
              <p>
                Frontend Mentor offers realistic coding challenges to help
                developers improve their frontend coding skills with projects in
                HTML, CSS, and JavaScript. It's suitable for all levels and
                ideal for portfolio building.
              </p>
            </div>
          </div>

          <div class="part">
            <button class="ques">
              <p class="p1">Is Frontend Mentor free?</p>
              <img src="./assets/images/icon-plus.svg" alt="" />
            </button>

            <div class="answer" hidden>
              <p>
                Yes, Frontend Mentor offers both free and premium coding
                challenges, with the free option providing access to a range of
                projects suitable for all skill levels.
              </p>
            </div>
          </div>
          <div class="part">
            <button class="ques">
              <p class="p1">
                Can I use Frontend Mentor projects in my portfolio?
              </p>
              <img src="./assets/images/icon-plus.svg" alt="" />
            </button>

            <div class="answer" hidden>
              <p>
                Yes, you can use projects completed on Frontend Mentor in your
                portfolio. It's an excellent way to showcase your skills to
                potential employers!
              </p>
            </div>
          </div>
          <div class="part" style="border-bottom: none">
            <button class="ques">
              <p class="p1">How can I get help if I'm stuck on a challenge?</p>
              <img src="./assets/images/icon-plus.svg" alt="" />
            </button>

            <div class="answer" hidden>
              <p>
                The best place to get help is inside Frontend Mentor's Discord
                community. There's a help channel where you can ask questions
                and seek support from other community members.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const questions = document.querySelectorAll(".ques");
      questions.forEach((question) => {
        question.addEventListener("click", function () {
          const part = this.parentElement;
          const answer = part.querySelector(".answer");
          const icon = this.querySelector("img");

          // 切换隐藏/显示
          this.classList.toggle("active");

          // 根据是否包含 'active' 类来显示或隐藏答案
          if (this.classList.contains("active")) {
            // 如果处于活跃状态 点击展开
            answer.classList.add("show");
            icon.src = "./assets/images/icon-minus.svg";
          } else {
            answer.classList.remove("show");
            icon.src = "./assets/images/icon-plus.svg";
          }
        });

        // 添加键盘支持
        question.addEventListener("keydown", function (e) {
          console.log("按下的键:", e.key, "键码:", e.keyCode);
          if (e.key === "Enter" || e.key === " ") {
            // 阻止默认行为
            e.preventDefault();
            // 模拟点击事件，触发点击处理函数
            this.click();
          }

          // 检查按下的键是否是向下箭头或向上箭头
          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
            // 阻止箭头键的默认行为
            e.preventDefault();

            // 获取当前问题在问题列表中的索引位置
            const currentIndex = Array.from(questions).indexOf(this);

            // 声明变量来存储下一个问题的索引
            let nextIndex;

            // 根据按下的箭头键方向计算下一个索引
            if (e.key === "ArrowDown") {
              // 向下箭头：移动到下一个问题(使索引达到最后一位时跳转回第一位)
              nextIndex = (currentIndex + 1) % questions.length;
            } else {
              // 向上箭头：移动到上一个问题
              nextIndex =
                (currentIndex - 1 + questions.length) % questions.length;
            }

            // 将焦点设置到下一个问题元素
            questions[nextIndex].focus();
          }
        });
      });
    </script>
  </body>
</html>
